<template>
	<div>
		<!-- vant导航栏 -->
		<van-nav-bar style="background-color: #3090EC;">
			<template #left>
				<van-icon @click="back" color="white" name="arrow-left" />
			</template>
			<template #title>
				<span style="color: white;">注册</span>
			</template>
		</van-nav-bar>
		<!-- vant表单 -->
		<van-form>
			<van-field
				v-model="username"
				name="账号"
				label="账号"
				placeholder="手机号"
				:rules="[{ required: true, message: '请填写账号' },{pattern:/^[1][3,5,6,7,8,9][0-9]{9}$/ , message: '请输入正确的11位手机号'}]"
			    >
				<template #button>
					<!-- <van-button round size="small" type="primary" @click="getSms">发送验证码</van-button> -->
                    <van-button round 
                        size="small"
                        type="primary"
                        class="smsbnt"
                        @click="getSms">{{time}}</van-button>
				</template>
            </van-field>
			<van-field
				v-model="password"
				:type="isPassword"
				name="密码"
				label="密码"
				placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' },{pattern: /^\w{6,}$/,message:'密码不少于6位'}]"
				>
			</van-field>

            <van-field
				v-model="confirmPassword"
				:type="isPassword"
				name="确认密码"
				label="确认密码"
				placeholder="确认密码"
				:rules="[{ validator: value=>{return value ===this.password},message: '密码不一致' }]"
				>
			</van-field>

            <van-field
				v-model="code"
				name="验证码"
				label="验证码"
				placeholder="输入验证码"
				:rules="[{ required: true, message: '请填写验证码' }]"
				>
			</van-field>
			<div style="margin: 16px;">
				<van-button @click="onSubmit" round block type="info" native-type="submit">
				注册
				</van-button>
			</div>
		</van-form>
		<div style="float: right;margin-right: 20px;">
			<router-link to="/login">已有账号,去登陆</router-link>
		</div>
	</div>
</template>

<script>
import { NavBar, Icon, Toast } from 'vant'
import { sendSms, register } from '@/api/wxLogin.js'
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon
  },
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      isPassword: 'password', // 密码的type类型
      isText: true,
      code: '',
      // 倒计时
      isClick: true,
      time: '获取验证码',
      phone: '',
      sms: '',
    }
  },
  methods: {
     // 获取验证码
    async getSms() {
      if (this.isClick) {
        if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.username)) {
          const res = await sendSms({ username: this.username })  // 获取验证码接口
          this.isClick = false
          let s = 60
          this.time = s + 's'
          let interval = setInterval(() => {
            s--
            this.time = s + 's'
            if (s < 0) {
              this.time = '重新获取'
              this.isClick = true
              clearInterval(interval)
            }
          }, 1000)
        } else {
          Toast.fail('请输入正确的手机号码')
        }
      }
    },
    onSubmit() { // 点击登录
      // 如果不符合登录条件则不会继续执行
      if (this.username.trim() === '') {
        Toast.fail('请输入正确的手机号码')
        return
      }
      if (!this.username.match(/^[1][3,5,6,7,8,9][0-9]{9}$/)) {
        Toast.fail('请输入正确的手机号码')
        return
      }
      if (!this.password.match(/^\w{6,}$/)) {
        Toast.fail('至少输入6位数密码')
        return
      }
      if (!(this.password===this.confirmPassword)) {
        Toast.fail('两次密码不匹配')
        return
      }
      register({username:this.username,password:this.password,code:this.code}).then(res =>{
          Toast.success('注册成功')
          this.$router.push({
            path: '/login'
          })
      })
    //   // 获取数据
    //   let users = localStorage.users
    //   if (users) {
    //     users = JSON.parse(users)
    //     let isLogin = false
    //     users.map(item => {
    //       if (item.username === this.username && item.password === this.password) {
    //         isLogin = true
    //         return
    //       }
    //     })
    //     if (isLogin) {
    //       sessionStorage.user = this.username
    //       this.$router.push({
    //         path: '/user'
    //       })
    //     } else {
    //       this.$notify({
    //         type: 'danger',
    //         message: '输入的账号或密码有误'
    //       })
    //     }
    //   } else {
    //     this.$notify({
    //       type: 'danger',
    //       message: '该用户不存在'
    //     })
    //   }
    },
    onPassword() { // 点击切换密码的type类型
      this.isText = !this.isText
      if (this.isText) {
        this.isPassword = 'password'
      } else {
        this.isPassword = 'text'
      }
    },
    back() { // 返回我的页面
      this.$router.push({
        path: '/home'
      })
    }
  }
}
</script>

<style>
.smsbnt{
    min-width: 80px;
}
</style>
